<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleTime">点击打印台</button>
    <button @click="createarr">点击打印数组</button>
    <div>{{ num }}</div>
    <input v-model="str" />
    <button @click="handlezuhe">点击阿纳尼</button>
    <p>{{ result }}</p>
    <br />
    <button @click="handleShowObj">点击</button>
    <hr />
    <h1 v-color>color</h1>
    <p v-color>测试</p>
  </div>
  <div>{{ a }}</div>
  <div>
    <div>{{number}}</div>
    <button @click="addnumber">点击number加1</button>
  </div>
</template>

<script>
export default {
  name: "demoOne",
  data() {
    return {
      number:1,
      num: "12",
      yangshiobj: {
        class: "democlass",
        id: "2",
      },
      str: "1,2,4,5,6,7",
      list: [
        { name: "wwd", value: 1 },
        { name: "wwd2", value: 2 },
        { name: "wwd3", value: 3 },
        { name: "wwd4", value: 4 },
        { name: "wwd5", value: 5 },
        { name: "wwd6", value: 6 },
        { name: "wwd7", value: 7 },
      ],
      result: "",
      value: undefined,
    };
  },
  //自定义指令(没有生效？)
  directives: {
    // 定义名为color的自定义质量零，指向一个配置选项
    color: {
      //el表示当前指令所绑定的dom
      bind(el) {
        console.log(el);
        el.style.color = "red";
      },
    },
  },
  methods: {
    addnumber(){
      this.number++
    },
    fn(str) {
      var p = new Promise((resolve, reject) => {
        var flag = true;
        setTimeout(() => {
          if (flag) {
            resolve(str);
          } else {
            reject("操作失败");
          }
        }, 200);
      });
      return p;
    },
    handleTime() {
      this.fn("shhahshhs").then((value) => {
        console.log(value);
        this.fn("sdsd").then((str) => {
          console.log(str);
        });
      });
    },
    async handleTimeAsync() {
      var value = await this.fn("wewewewewewe");
      var value2 = await this.fn("w2");
      var value3 = await this.fn("wewe3");
      console.log(value, value2, value3);
    },
    handlezuhe() {
      let result = this.str.split(",").reduce((pre, th, index) => {
        return (
          pre +
          `${index === 0 ? "" : ","}` +
          this.list.find((item) => item.value == th).name
        );
      }, "");
      this.result = result;
    },
    createarr() {
      let arr1 = [1, 2, 3, 4];
      let arr2 = [1, 7, 8];
      let newarr = [...new Set([...arr1, ...arr2])];
      console.log(newarr);
    },
    handleShowObj() {
      const list = { 1: "111", 2: "222" };
      let flagArr = [1, 2, 3, [3, 4, 5]];
      console.log("对象的值", Object.values(list));
      console.log(flagArr.flat());
      if ((this.value ?? "") !== "") {
        console.log("tong");
      }
    },
  },
  // 计算属性
  computed: {
    a: function () {
      return this.num + "计算属性";
    },
  },
  watch:{
    number:function(newnumber,oldnumber){
      console.log('number从'+oldnumber+'变为了'+newnumber);
    }
  },
  //一些生命周期
  beforeCreate(){},
  created(){},
  beforeMount(){},
  mounted(){},
  beforeUpdate(){},
  updated(){},
  beforeDestroy(){},
  destroyed(){},
};
</script>
<style>
@media (min-width: 1024px) {
  .about {
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
  }
}
</style>
